
<template>
  <!--地图导航-->
  <div class="mapNavigation">
    <!--    <div v-html="mapNav"></div>-->
    <div id="container">

      <!--      <el-amap vid="amap" :zoom="zoom" :center="center">-->
      <!--        <el-amap-marker  :position="position"></el-amap-marker>-->
      <!--      </el-amap>-->
      <!--        <el-amap-->
      <!--          ref="map"-->
      <!--          :vid="'amap'"-->
      <!--          :center="center"-->
      <!--          :zoom="zoom"-->
      <!--          :plugin="plugin"-->
      <!--          :events="events"-->
      <!--          class="amap-demo"-->
      <!--        >-->
      <!--          <el-amap-text-->
      <!--            :text="item.OrgName"-->
      <!--            :offset="[0, -50]"-->
      <!--            :position="position"-->
      <!--          >-->
      <!--          </el-amap-text>-->
      <!--          <el-amap-marker :position="position" :icon="icon"></el-amap-marker>-->
      <!--        </el-amap>-->
    </div>
  </div>
</template>

<script>
import {MAPNAVI} from "../store/interfaceUrl";

export default {
  name: "mapNavigation",
  data(){
    return{
      mapNav:"",
      marker:null,
    }
  },
  mounted(){
    this.getMapDest()
    this.getMap()
  },
  methods:{
    getMap(){
      // 获取地理编码
      let that = this
      AMap.plugin('AMap.Geocoder', function() {
        let geocoder = new AMap.Geocoder({
          // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
          city: '全国'
        })
        geocoder.getLocation("成都市武侯区二环路南4段9号西南50米", function(status, result) {
          if (status === 'complete' && result.info === 'OK') {
            // result中对应详细地理坐标信息
            let mapLng = result.geocodes[0].location.lng
            let mapLat = result.geocodes[0].location.lat

            let map = new AMap.Map('container', {
              zoom: 18,
              center: [mapLng,mapLat]
            });
            that.marker = new AMap.Marker({
              map: map,
              position: [mapLng,mapLat],
              icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b1.png',
              // label: {
              // offset: new AMap.Pixel(20, 20),
              // content: `<div style="border-radius:5px;color: #000;height: 30px;padding: 1rem;">点击打开高德地图</div>`
              // }
            })
            that.marker.on('click', function (e) {
              that.getAddGPS()
            })
            //实例化信息窗体
            let title = `<div style="
                            color:#000;
                            font-weight:bold;
                            font-size: 14px;
                            text-align: left;
                            text-indent:1rem;
                            line-height:2rem;
                            background-color:#F9F9F9;
                            border-top: 1px #C0C0C0 solid;border-right: 1px #C0C0C0 solid;border-left: 1px #C0C0C0 solid;">
                        XX地方</div>`,
                content = [];
            content.push("<img src=''>地址：成都市武侯区二环路南4段9号西南50米");
            content.push("电话：010-64733333");
            content.push("<a href='#'>详细信息</a>");
            let infoWindow = new AMap.InfoWindow({
              isCustom: true,  //使用自定义窗体
              content: that.createInfoWindow(title, content.join("<br/>")),
              offset: new AMap.Pixel(16, -15)
            });
            infoWindow.open(map, that.marker.getPosition());
            if (AMap.UA.mobile) {
              // document.getElementsByClassName('info')[0].style.display='none';
            }
          }else{
            console.log("没拿到地址",result)
          }
        })
      })
    },

    //构建自定义信息窗体
    createInfoWindow(title, content) {
      let that = this
      let info = document.createElement("div");
      //可以通过下面的方式修改自定义窗体的宽高
      info.style.width = "100%";
      info.style.fontSize="14px"
      info.style.lineHeight="1.6rem"

      // 定义顶部标题
      let top = document.createElement("div");
      let titleD = document.createElement("div");
      // let closeX = document.createElement("img");
      //     top.className = "info-top";
      titleD.innerHTML = title;
      //     closeX.src = "https://webapi.amap.com/images/close2.gif";
      //     closeX.onclick = that.closeInfoWindow;

      top.appendChild(titleD);
      // top.appendChild(closeX);
      info.appendChild(top);
      info.addEventListener("click",function(e){
        that.getAddGPS()
      });
      // 定义中部内容
      let middle = document.createElement("div");
      middle.style.backgroundColor = '#fff';
      middle.style.padding="0.4rem"
      middle.style.textAlign="left"
      middle.style.border="1px #C0C0C0 solid"
      middle.innerHTML = content;
      info.appendChild(middle);

      // 定义底部内容
      let bottom = document.createElement("div");
      bottom.style.position = 'relative';
      bottom.style.top = '-1px';
      bottom.style.margin = '0 auto';
      let sharp = document.createElement("img");
      sharp.src = "https://webapi.amap.com/images/sharp.png";
      // sharp.style.border="1px red solid"
      bottom.appendChild(sharp);
      info.appendChild(bottom);
      return info;
    },
    getAddGPS(){
      console.log("12323")

      this.marker.markOnAMAP({
        name: "成都市武侯区二环路南4段9号西南50米",
        position: this.marker.getPosition()
      })
    },

    // //关闭信息窗体
    //  closeInfoWindow() {
    //   map.clearInfoWindow();
    // },
    getMapDest(){
      this.$store.dispatch('MAPDEST',{key:'269f43dac37513162e605e39c849f7b6',address:'成都市武侯区二环路南4段9号西南50米'}).then(res=> {
        console.log("经纬度：",res)
        if(res.infocode === "10000"){
          this.getMapNav(res.geocodes[0].location)
        }
      })
    },
    getMapNav(location){
      this.$store.dispatch('MAPNAVI',{start:'104.076536,30.515331',dest:location,destName:'成都康伯尔医院',naviBy:"car",key:'a560e81a439f44beb1bbd05cd91a1aab'}).then(res=>{
        // console.log("导航",res)
        this.mapNav = res;
      })
    },
  }
}
</script>

<style scoped>
#container {height:400px;
  margin-bottom: 2rem;}

</style>